<template>
	<view>
		<u-popup v-model="show" mode="right" @close="closeModel" :mask="false" width="55%"
			:custom-style="{top: '50rpx'}">
			<!-- style="height: 100%; position: absolute;right: 0;width: 50%;" -->
			<scroll-view scroll-y="auto" v-if="show" style="padding-top: 10rpx;">
				<view class="tableItem" v-for="(item, index) in get_table" :key="index">
					<view class="tableTitle">
						<view class="title-text">
							{{item.table_title}}
						</view>
					</view>
					<view class="web-box">
						<iframe :src="`/static/hybrid/html/webViewLink.html?id=${item.id}&end_time=${item.end_time-2}&index=${index}&token=${needToken}`"  scrolling="yes"></iframe>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import gameTable from "@/api/game"
	export default {
		props: ['showModel'],
		data() {
			return {
				show: false,
				//游戏桌定时器
				tableTimer: null,
				//需要的
				needToken: '',
				//更新的游戏桌
				// refreshIndex: -1,
				//游戏桌列表
				get_table: [],
			}
		},
		watch: {
			'showModel'(val) {
				// this.getGameTable();
				this.show = val
				if (val) {
					this.showWebView()
				}
			}
		},
		mounted() {
			this.getGameTable();
			this.needToken = uni.getStorageSync('Access-Token')
		},
		onUnload() {
			clearTimeout(this.tableTimer)
		},
		
		methods: {
			
			getGameTable() {
				let routes = getCurrentPages();
				let curParam = routes[routes.length - 1].options;
				gameTable.gameTable({
					type_id: curParam.type_id
				}).then((res) => {
					if (res.data.code == 200) {
						this.get_table = res.data.data
						this.sortTableList()
					} else {
						this.$tip.alert(res.data.message);
					}
				})
			},
			/**
			 * 桌子列表排序
			 * */
			sortTableList(){
				this.get_table.sort((x, y) => {
					if(x.id > y.id){
						return 1;
					}else if(x.id < y.id){
						return -1;
					}else{
						return 0;
					}
				})
			},
			showWebView() {
				setTimeout(() => {
					for (var i = 2; i < window.frames.length; i++) {
						window.frames[i].frameElement.style.zIndex = 99999
						window.frames[i].frameElement.style.right = '0'
						window.frames[i].frameElement.style.left = 'auto'
					}
				}, 500)
			},
			closeModel() {
				this.$parent.$parent.showTabs = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-drawer-content {
		background-color: #1D1C22;
		border-radius: 20rpx 0 0 20rpx;
		border: 2rpx solid #E7CA90;
		border-right: none;
	}

	.tableItem {
		width: 98%;
		height: 206rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		margin: 6rpx auto;
		position: relative;

		.tableTitle {
			background-color: #000000;
			width: 90%;
			margin: 0 auto;
			height: 20rpx;
			line-height: 20rpx;

			.title-text {
				color: #E7CA90;
				font-size: 24rpx;
				transform: scale(.8);
				transform-origin: 0 0;
			}
		}

		.web-box {
			width: 100%;
			height: 202rpx;
			position: relative;
			overflow: hidden;
		}
		.table-time{
			position: absolute;
			z-index: 1000;
			color: #ACD290;
			font-size: 16px;
			width: 50rpx;
			border: 1px solid red;
		}

	}
</style>
